<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="pt" class="demo-form-inline" :rules="addRules" ref="addForm">
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="pt.idNumber" placeholder="身份证号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btClick('addForm')">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table :data="patientInfo" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="birthday" label="出生日期"></el-table-column>
      </el-table>
    </el-main>
    <el-main>
      挂号项目
      <el-table
        :data="itemData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column>
          <!-- <el-checkbox></el-checkbox> -->
          <el-table-column type="selection" width="55"></el-table-column>
        </el-table-column>
        <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column> -->
        <el-table-column prop="registId" label="挂号编码" width="140"></el-table-column>
        <el-table-column prop="registTime" label="挂号时间" width="140"></el-table-column>
        <el-table-column prop="registLEvel" label="挂号级别" width="140"></el-table-column>
        <el-table-column prop="registDept" label="挂号部门" width="140"></el-table-column>
        <el-table-column prop="registDoctor" label="挂号医生" width="140"></el-table-column>
        <el-table-column prop="totalCount" label="费用" width="140"></el-table-column>
        <el-table-column prop="status" label="是否进行" width="140"></el-table-column>
        <!-- 其实在el-table下,书写的各个列的信息,然后会根据userData自动生成n行 -->
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="registHandleSizeChange"
          @current-change="registHandleCurrentChange"
          :current-page.sync="registCurrentPageNum"
          :page-sizes="[1, 5, 10]"
          :page-size="registPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="registTotalRecord"
        ></el-pagination>
      </div>
      <div style="float:right">
        <el-button @click="readyPay" type="primary">确定退号</el-button>
      </div>
    </el-main>
    <el-dialog title="退费票据" :visible.sync="queryDialogVisible" :show-close="false">
      <el-table :data="patientInfo" style="width: 100%">
        <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column> -->
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号" width="140"></el-table-column>
        <el-table-column prop="birthday" label="出生日期" width="140"></el-table-column>
        <!-- <el-table-column prop="patientId" label="身份证号" width="180"></el-table-column> -->
        <!-- 其实在el-table下,书写的各个列的信息,然后会根据userData自动生成n行 -->
      </el-table>
      <el-table :data="multipleSelection" style="width: 100%">
        <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column> -->
        <el-table-column prop="registId" label="挂号编码" width="140"></el-table-column>
        <el-table-column prop="registTime" label="挂号时间" width="140"></el-table-column>
        <el-table-column prop="registLEvel" label="挂号级别" width="140"></el-table-column>
        <el-table-column prop="registDept" label="挂号部门" width="140"></el-table-column>
        <el-table-column prop="registDoctor" label="挂号医生" width="140"></el-table-column>
        <el-table-column prop="totalCount" label="费用" width="140"></el-table-column>
        <el-table-column prop="status" label="是否进行" width="140"></el-table-column>
        <!-- 其实在el-table下,书写的各个列的信息,然后会根据userData自动生成n行 -->
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exit">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import { remove, selectInfo } from "@/api/removeDiag.js";
export default {
  data() {
    let validIdnumber = (rule, value, callback) => {
      if (
        value &&
        (!/\d{17}[\d|x]|\d{15}/.test(value) ||
          (value.length !== 15 && value.length !== 18))
      ) {
        callback(new Error("身份证号码不符合规范"));
      } else {
        callback();
      }
    };
    return {
      addForm: "",
      addRules: {
        idNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: validIdnumber, trigger: "blur" }
        ]
      },
      pt: {
        idNumber: ""
      },
      registTotalRecord: 3,
      registCurrentPageNum: 1,
      registPageSize: 5,
      queryDialogVisible: false,
      multipleSelection: [],
      patientId: "",
      invoiceNumber: "",
      patientInfo: [],
      item: {
        registId: "",
        registTime: "",
        registLEvel: "",
        registDept: "",
        registDoctor: "",
        totalCount: "",
        status: ""
      },
      itemData: [],
      itemPay: [],
      itemSelect: []
    };
  },
  methods: {
    btClick(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          return false;
        } else {
          this.patientId = this.pt.idNumber;
          this.getInfo();
        }
      });
    },
    getInfo() {
      let tmp = {
        patientId: this.patientId,
        curPage: this.registCurrentPageNum,
        pageSize: this.registPageSize
      };
      selectInfo(tmp).then(response => {
        if (response.data.code == 0) {
          console.log(response);
          this.itemData = [];
          this.patientInfo = [];
          this.registTotalRecord = parseInt(response.data.data.data.total);
          for (var i = 0; i < response.data.data.data.records.length; i++) {
            let tmp1 = {
              registId: response.data.data.data.records[i].registId,
              registTime: response.data.data.data.records[i].registTime,
              registLEvel: response.data.data.data.records[i].registLEvel,
              registDept: response.data.data.data.records[i].registDept,
              registDoctor: response.data.data.data.records[i].registDoctor,
              totalCount: response.data.data.data.records[i].totalCount,
              status: response.data.data.data.records[i].status
            };
            this.itemData.push(tmp1);
          }
          console.log(this.itemData);
          let tmp = {
            name: response.data.data.patient.name,
            idNumber: response.data.data.patient.idNumber,
            birthday: response.data.data.patient.birthday
          };
          this.patientInfo.push(tmp);
        } else {
          this.$message("身份证号不正确！");
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    readyPay() {
      //点击确定退费按钮调用
      for (var i = 0; i < this.multipleSelection.length; i++) {
        if (this.multipleSelection[i].status == "是") {
          this.$message("只能选择未进行的挂号进行退号！");
          return false;
        }
      }
      this.open();
    },
    open() {
      //弹出 确定 提示框
      this.$confirm("确定退号？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log("run here");
          this.selectPay();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退号"
          });
        });
    },
    result() {
      //退费成功后，弹出退费凭证框
      var cost = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        cost -= parseInt(this.multipleSelection[i].totalCount);
        var str = "-".concat(this.multipleSelection[i].totalCount);
        this.multipleSelection[i].totalCount = str;
      }
      let tmp = {
        itemName: "总计",
        totalCount: cost
      };
      this.multipleSelection.push(tmp);
      this.queryDialogVisible = true;
    },
    registHandleSizeChange(val) {
      console.log("页大小：" + val);
      this.registPageSize = val;
      this.getInfo();
    },
    registHandleCurrentChange(val) {
      console.log("当前页：" + val);
      this.registCurrentPageNum = val;
      this.getInfo();
    },
    exit() {
      //关闭退费凭证调用
      console.log("run to exit");
      this.getInfo();
      //this.$refs.multipleTable.clearSelection();
      this.queryDialogVisible = false;
      this.multipleSelection.length = 0;
    },
    selectPay() {
      //   console.log("run pay");
      //  // list = [];
      //   console.log(this.multipleSelection);
      //   console.log("run this");
      console.log(this.multipleSelection);
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.itemSelect.push(this.multipleSelection[i].registId);
      }
      let tmp = {
        registId: this.itemSelect
      };
      console.log("run tmp" + tmp);
      remove(tmp).then(response => {
        if (response.data.code == 0) {
          this.result();
        } else {
          this.$message("退号失败！");
        }
      });
    }
  }
};
</script>